<template>
	<view class=" box-sizing ">
	
		<view class="flex">
			<view class="left_btn">
				<view class="tab_btn" v-for="(i,v) in grade_ids" :key="v" :class="current==v?'hover':''"
					@click="tabClick(i,v)">
					{{i.label}}
				</view>
			</view>
			<view class="right paddingTop-20" v-if="bookList.length!=0">
				<view class="right_list flex bookBox" v-for="(item,index) in bookList" :key="index"
					:class="item.bookId == clickBookId?'boxBorder1':'boxBorder2'" @click="itemClick(item)">
					<image :src="item.pic" mode="" class="main_img"></image>
					<view class="">
						<view class="name">
							{{item.bookname}}
						</view>
						<view class="flex u-flex-between paddingTop-88">
							<view class="pro">
								共{{item.num}}词
							</view>
							<view class="flex items-center" v-if="item.learn_status==2">
								<image src="../../static/image/learn_status.png" mode="" class="status_img"></image>
								<view class="status_tit">
									正在学
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="right" v-else>
				<image src="../../static/image/no_book.png" mode="" class="noda_img"></image>
				<view class="noda_title">
					无相关书本，选择其他年级试试！
				</view>
			</view>
		</view>
		<up-gap height="120"></up-gap>
		<view class="fixed" @click="btnClick">
			确认
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	const getBookListApi = inject('getBookList');
	const changeBookApi = inject('changeBook');
	const current = ref(0)
	// 创建响应式数据  
	const status = ref('loadmore');
	const list = ref([]);
	const page = ref(1);
	const grade_ids = ref([])
	const grade_id = ref('')
	const defaultBookId = ref(0)
	const bookList = ref([])
	const clickBookId = ref('')
	const getUserInfoApi = inject('getUserInfo')
	onLoad((op) => {
		grade_id.value = op.grade_id
		clickBookId.value=op.book_id
		// loginWordCode()
		getBookList()
	})
	const getBookList = () => {
		uni.showLoading({
			title: '加载中'
		})
		getBookListApi({
			grade_id: grade_id.value
		}).then(res => {
			console.log(res, 'ooooooooooo')
			bookList.value = res.bookList
			grade_ids.value = res.grade_ids
			grade_ids.value.forEach((item, index) => {
				if (item.value == grade_id.value) {
					current.value = index
				}
			})
			uni.hideLoading()
		})
	}
	const tabClick = (i, v) => {
		current.value = v
		grade_id.value = i.value
		getBookList()
	}
	// getBookList()
	const btnClick = () => {
		if (!clickBookId.value) {
			return uni.showToast({
				title: '请先选择课本！',
				icon: 'none'
			})
		}
		// uni.navigateBack()
		changeBookApi({
			book_id: clickBookId.value
		}).then(res => {
			console.log(res)
			uni.redirectTo({
				url:'/pages/index/index'
			})
		})
	}
	const itemClick = (t) => {
		console.log(t)
		clickBookId.value = t.bookId
		// t.learn_status = 2
		// defaultBookId.value = t.is
	}
</script>

<style lang="scss">
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: calc(50rpx);
		width: 100vw;
	}

	.bookBox {
		flex: 1;
		position: relative;
		padding: 15rpx;
	}

	.boxBorder2 {
		// border: 2px solid #fff;
	}

	.boxBorder1 {
		transition: all .3s;

		&::before {
			content: "";
			position: absolute;
			inset: -5rpx;
			// top: -0px;
			// left: -0px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #51D580;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			content: "";
			position: absolute;
			inset: -5rpx;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #51D580;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			animation: div5Ani 1s -0.5s linear;
		}

	}

	@keyframes div5Ani {

		0%,
		100% {
			clip-path: inset(0 0 98% 0);
		}

		25% {
			clip-path: inset(0 98% 0 0);
		}

		50% {
			clip-path: inset(98% 0 0 0);
		}

		75% {
			clip-path: inset(0 0 0 98%);
		}
	}

	.left_btn {
		width: 176rpx;
		height: 100vh;
		background: rgba(81, 213, 128, .08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;

		.tab_btn {
			width: 176rpx;
			height: 104rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.hover {
			background: #FFFFFF;
			color: #51D580;
		}
	}

	.right {
		// height: 100vh;
		// overflow-y: auto;
		position: relative;
		left: 177rpx;
		width: 574rpx;

		.right_list {
			padding: 20rpx 32rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #EBEBEB;

			.main_img {
				width: 142rpx;
				height: 196rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 20rpx;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				width: 354rpx;
			}

			.pro {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			.status_img {
				width: 36rpx;
				height: 36rpx;
			}

			.status_tit {
				color: linear-gradient(90deg, rgba(81, 213, 128, 0.98) 0%, #51D580 100%);
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				margin-left: 4rpx;
			}

		}
	}

	.noda_img {
		width: 160rpx;
		height: 160rpx;
		margin: 300rpx auto 40rpx;
		display: block;
	}

	.noda_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}

	.fixed {
		width: 702rpx;
		height: 104rpx;
		background: linear-gradient(180deg, rgba(81, 213, 128, 0.98) 0%, #51D580 100%);
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		left: 24rpx;
		bottom: 30rpx;
	}
</style>